<template>
  <div class="app-wrapper">
    <headerTitle :titleList="titleList" :hideButton="true" />
    <div class="app-container">
      <div class="block containerMain" ref="block">
        <div class="tab-container">
          <el-form
            ref="formName"
            style="width:98%;color: #333;font-size: 14px;"
            :rules="rules"
            :model="infoForm"
            label-width="160px"
          >
            <el-form-item label="角色名称" prop="name">
              <el-input
                size="small"
                placeholder="请输入角色名称"
                maxlength="16"
                style="width: 230px"
                v-model="infoForm.name"
                :disabled="type == '3'"
              ></el-input>
            </el-form-item>
            <el-form-item label="角色描述" prop="remark">
              <el-input
                type="textarea"
                :rows="6"
                style="width: 500px"
                maxlength="100"
                placeholder="请输入权限描述"
                :disabled="type == '3'"
                v-model="infoForm.remark"
              ></el-input>
            </el-form-item>
            <el-form-item label="权限菜单">
              <el-tabs
                type="card"
              >

              </el-tabs>

              <div class="tree-con">
                <el-tree
                  ref="menuTree"
                  :data="treeData"
                  node-key="id"
                  show-checkbox
                  :props="defaultProps"
                  default-expand-all
                  :default-checked-keys="selectedmenu"
                  :expand-on-click-node="false"
                  @check="handelMenuCheck"
                >
                  <span slot-scope="{ data }" class="custom-tree-node">
                    <span>{{ data.name }}</span>
                  </span>
                </el-tree>
              </div>
            </el-form-item>
          </el-form>
          <div style="width:78%; margin-left:160px;">
            <el-button
              v-if="type == '3'"
              size="mini"
              type="default"
              @click="cancel()"
              >返回</el-button
            >
            <el-button v-else size="mini" type="default" @click="cancel()"
              >取消</el-button
            >
            <el-button
              v-show="type == '1'"
              size="mini"
              type="primary"
              @click="saveAdd()"
              >保存</el-button
            >
            <el-button
              v-show="type == '2'"
              size="mini"
              type="primary"
              @click="saveEdit()"
              >保存</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import HeaderTitle from "@/components/Headertitle/index";
import {
  fetchEditData,
  fetchAdd,
  fetchEdit,
  fetchmenuTree,
  fetchProducts
} from "@/api/systemapi/auth";
import { translateDataToTree } from "@/utils";
export default {
  components: {
    HeaderTitle
  },
  data() {
    return {
      entNum:"super",
      type: "", //查看编辑新增
      saveBtnShow: false, //保存按钮
      titleList: [{ title: "坐席角色管理" }, { title: "编辑角色" }],
      treeData: null,
      defaultProps: {
        children: "child",
        label: "name",
        id: "id",
        disabled:true
      },
      selectedmenu: [], // 菜单权限
      infoForm: {
        name: "",
        remark: ""
      },
      rules: {
        name: [{ required: true, message: "请输入角色名称", trigger: "blur" }]
      },
      editid: "",
      props: {
        label: "name",
        children: "child"
      },
      checkAll: false,
      menuArray: [],
      productList: []
    };
  },
  mounted() {
    let userInfo = JSON.parse(window.localStorage.getItem("epm_userInfo"),"epm_userInfo")
    this.entNum = userInfo.entNum;
    this.type = this.$route.query.type;
    this.infoForm.name = this.$route.query.name;
    this.infoForm.remark = this.$route.query.remark;
    if (this.type == "2") {
      // this.getData(this.$route.query.id);
      this.editid = this.$route.query.id;
      this.titleList[1].title = "编辑角色";
    }
    if (this.type == "3") {
      this.editid = this.$route.query.id;
      this.titleList[1].title = "查看角色";
      this.saveBtnShow = true;
      this.defaultProps.disabled=()=>{
        return true;
      }
    } else {
      this.saveBtnShow = false;
    }
    this.getProducts();
  },
  methods: {
    cancel() {
       this.$router.push({
        path: "/vpm/auth/detail"
      });
    },

    // 获取树形菜单数据
    getTreeData(disable) {
      let type = 2;
      if( this.entNum == 'super'){
        type = 1
      }
      fetchmenuTree({disable:disable,type:type}).then(response => {
        this.treeData = response.data;
      });
    },

    handelMenuCheck() {
      this.selectedmenu = this.$refs.menuTree.getCheckedKeys();
    },
    getProducts() {
        this.type == "3" ? this.getTreeData(true) : this.getTreeData(false);
        if (this.type == "2" || this.type == "3") {
          this.getData(this.$route.query.id);
        }
    },
    getData(id) {
      fetchEditData({ id: id }).then(response => {
        this.$refs.menuTree.setCheckedKeys(response.data.menus);
        // this.selectedmenu=response.data.menus;
      });
    },
    handleCheckAllChange(val) {
      if (this.checkAll) {
        this.$refs.menuTree.setCheckedNodes(this.treeData);
      } else {
        this.$refs.menuTree.setCheckedKeys([]);
      }
    },
    saveAdd() {
      let menus = this.$refs.menuTree.getCheckedKeys();

      if (this.$refs.menuTree.getCheckedKeys().length == 0) {
        this.$confirm("当前未勾选任何权限，是否保存?", "提示", {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.addFn(menus);
        });
      } else {
        this.addFn(menus);
      }
    },
    addFn(menus) {
      fetchAdd({ menus: menus, ...this.infoForm,entNum:this.entNum }).then(response => {
        if (response.code == 0) {
          this.cancel();
        } else {
          this.$message({
            type: "error",
            message: response.msg
          });
        }
      });
    },
    saveEdit() {
      let menus = this.$refs.menuTree.getCheckedKeys();
      fetchEdit({ id: this.editid, menus: menus, ...this.infoForm }).then(
        response => {
          if (response.code == 0) {
            this.cancel();
          } else {
            this.$message({
              type: "error",
              message: response.msg
            });
          }
        }
      );
    }
  }
};
</script>
<style lang="scss">
.tab-container {
  .el-tabs__header {
    margin: 0;
  }
  .el-tabs--card > .el-tabs__header .el-tabs__nav {
    border-radius: 0;
  }
}
</style>
<style lang="scss" scoped>
.app-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  .app-container {
    .block {
      width: 100%;
      height: 100%;
      background: #fff;
      .tab-container {
        width: 100%;
        margin-top: 15px;
        .tree-con {
          height: 420px;
          overflow: auto;
          border: 1px solid #e4e7ed;
          border-top: none;
        }
      }
    }
  }
}
</style>
